<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2025款旗舰智能手机 - ShoppingEase</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#FF7D00',
                        success: '#00B42A',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                        dark: '#1D2129',
                        'dark-2': '#4E5969',
                        'light-1': '#F2F3F5',
                        'light-2': '#E5E6EB',
                        'light-3': '#C9CDD4'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
</head>
<body class="font-inter bg-gray-50 text-dark">
    <!-- 顶部通知栏 -->
    <div class="bg-primary text-white text-center py-1 px-4 text-sm">
        <p>全场满199元免运费 | 新用户注册立减50元 <a href="register.html" class="underline font-medium">立即注册</a></p>
    </div>

    <!-- 导航栏 -->
    <header class="sticky top-0 z-50 bg-white shadow-sm">
        <div class="container mx-auto px-4">
            <div class="flex items-center justify-between h-16 md:h-20">
                <!-- Logo -->
                <a href="index.html" class="flex items-center space-x-2">
                    <i class="fa fa-shopping-bag text-primary text-2xl"></i>
                    <span class="text-xl font-bold text-primary">ShoppingEase</span>
                </a>

                <!-- 搜索栏 - 中等屏幕以上显示 -->
                <div class="hidden md:flex items-center flex-1 max-w-xl mx-8">
                    <div class="relative w-full">
                        <input type="text" placeholder="搜索商品、品牌或分类..." 
                            class="w-full py-2 pl-10 pr-4 rounded-full border border-light-2 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all">
                        <button class="absolute left-3 top-1/2 transform -translate-y-1/2 text-light-3 hover:text-primary transition-colors">
                            <i class="fa fa-search"></i>
                        </button>
                        <button class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-primary text-white py-1 px-4 rounded-full hover:bg-primary/90 transition-colors">
                            搜索
                        </button>
                    </div>
                </div>

                <!-- 用户操作区 -->
                <div class="flex items-center space-x-4">
                    <!-- 搜索按钮 - 小屏幕显示 -->
                    <button class="md:hidden text-dark-2 hover:text-primary transition-colors">
                        <i class="fa fa-search text-xl"></i>
                    </button>
                    
                    <!-- 购物车 -->
                    <a href="cart.html" class="relative text-dark-2 hover:text-primary transition-colors">
                        <i class="fa fa-shopping-cart text-xl"></i>
                        <span id="cart-count" class="absolute -top-2 -right-2 bg-secondary text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span>
                    </a>
                    
                    <!-- 用户菜单 -->
                    <div id="user-menu-container" class="relative">
                        <!-- 未登录状态 -->
                        <div id="guest-menu" class="flex items-center space-x-2">
                            <a href="login.html" class="text-dark-2 hover:text-primary transition-colors">
                                <i class="fa fa-user-circle-o text-xl"></i>
                            </a>
                            <div class="hidden md:block">
                                <a href="login.html" class="text-dark-2 hover:text-primary transition-colors">登录</a>
                                <span class="text-light-3 mx-1">/</span>
                                <a href="register.html" class="text-dark-2 hover:text-primary transition-colors">注册</a>
                            </div>
                        </div>
                        
                        <!-- 已登录状态 -->
                        <div id="user-menu" class="hidden">
                            <button id="profile-btn" class="flex items-center space-x-2 text-dark-2 hover:text-primary transition-colors">
                                <i class="fa fa-user-circle text-xl"></i>
                                <span id="username-display" class="hidden md:inline">用户名</span>
                                <i class="fa fa-angle-down text-xs"></i>
                            </button>
                            <div id="profile-dropdown" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg py-2 z-50">
                                <a href="profile.html" class="block px-4 py-2 text-sm text-dark-2 hover:bg-light-1 hover:text-primary transition-colors">
                                    <i class="fa fa-user-o mr-2"></i>个人中心
                                </a>
                                <a href="#" class="block px-4 py-2 text-sm text-dark-2 hover:bg-light-1 hover:text-primary transition-colors">
                                    <i class="fa fa-history mr-2"></i>我的订单
                                </a>
                                <a href="#" class="block px-4 py-2 text-sm text-dark-2 hover:bg-light-1 hover:text-primary transition-colors">
                                    <i class="fa fa-heart-o mr-2"></i>我的收藏
                                </a>
                                <div class="border-t border-light-2 my-1"></div>
                                <a href="#" id="logout-btn" class="block px-4 py-2 text-sm text-danger hover:bg-light-1 transition-colors">
                                    <i class="fa fa-sign-out mr-2"></i>退出登录
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 移动端搜索框 - 默认隐藏 -->
            <div class="py-3 hidden">
                <div class="relative w-full">
                    <input type="text" placeholder="搜索商品、品牌或分类..." 
                        class="w-full py-2 pl-10 pr-4 rounded-full border border-light-2 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all">
                    <button class="absolute left-3 top-1/2 transform -translate-y-1/2 text-light-3 hover:text-primary transition-colors">
                        <i class="fa fa-search"></i>
                    </button>
                    <button class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-primary text-white py-1 px-4 rounded-full hover:bg-primary/90 transition-colors">
                        搜索
                    </button>
                </div>
            </div>
        </div>
    </header>

    <main class="py-8">
        <div class="container mx-auto px-4">
            <!-- 面包屑导航 -->
            <nav class="flex mb-4 text-sm">
                <a href="index.html" class="text-dark-2 hover:text-primary">首页</a>
                <span class="mx-2 text-light-3">/</span>
                <a href="#" class="text-dark-2 hover:text-primary">手机通讯</a>
                <span class="mx-2 text-light-3">/</span>
                <a href="#" class="text-dark-2 hover:text-primary">智能手机</a>
                <span class="mx-2 text-light-3">/</span>
                <span class="text-dark">2025款旗舰智能手机</span>
            </nav>

            <div class="grid grid-cols-1 md:grid-cols-5 gap-6">
                <!-- 商品图片 -->
                <div class="md:col-span-2">
                    <div class="bg-white rounded-lg shadow-sm p-4 mb-4">
                        <img src="images/product_detail.jpg" alt="2025款旗舰智能手机" class="w-full h-auto rounded">
                    </div>
                    <div class="grid grid-cols-4 gap-2">
                        <div class="border-2 border-primary rounded cursor-pointer">
                            <img src="images/product_detail_thumb1.jpg" alt="手机正面" class="w-full h-auto rounded">
                        </div>
                        <div class="border-2 border-transparent hover:border-primary rounded cursor-pointer">
                            <img src="images/product_detail_thumb2.jpg" alt="手机背面" class="w-full h-auto rounded">
                        </div>
                        <div class="border-2 border-transparent hover:border-primary rounded cursor-pointer">
                            <img src="images/product_detail_thumb3.jpg" alt="手机侧面" class="w-full h-auto rounded">
                        </div>
                        <div class="border-2 border-transparent hover:border-primary rounded cursor-pointer">
                            <img src="images/product_detail_thumb4.jpg" alt="手机配件" class="w-full h-auto rounded">
                        </div>
                    </div>
                </div>

                <!-- 商品信息 -->
                <div class="md:col-span-3">
                    <div class="bg-white rounded-lg shadow-sm p-6">
                        <h1 class="text-2xl font-bold mb-3">2025款旗舰智能手机 6.7英寸大屏 128G/256G可选</h1>
                        <div class="flex items-center mb-4">
                            <div class="flex">
                                <i class="fa fa-star text-warning"></i>
                                <i class="fa fa-star text-warning"></i>
                                <i class="fa fa-star text-warning"></i>
                                <i class="fa fa-star text-warning"></i>
                                <i class="fa fa-star text-warning"></i>
                            </div>
                            <span class="text-dark-2 text-sm ml-2">5.0 (1286条评价)</span>
                            <span class="text-dark-2 text-sm ml-4">销量: 2568</span>
                        </div>
                        
                        <!-- 价格区域 -->
                        <div class="bg-light-1 p-4 rounded mb-6">
                            <div class="flex items-baseline mb-2">
                                <span class="text-dark-2 text-sm mr-2">售价:</span>
                                <span class="text-danger text-2xl font-bold">¥4299</span>
                                <span class="text-light-3 text-sm line-through ml-2">¥4599</span>
                                <span class="bg-danger text-white text-xs py-0.5 px-2 rounded ml-2">立减300元</span>
                            </div>
                            <div class="flex items-center mb-2">
                                <span class="text-dark-2 text-sm mr-2">促销:</span>
                                <span class="bg-primary/10 text-primary text-xs py-0.5 px-2 rounded">限时优惠</span>
                                <span class="text-dark-2 text-xs ml-2">满4000减300，满5000减500</span>
                            </div>
                            <div class="flex items-center">
                                <span class="text-dark-2 text-sm mr-2">运费:</span>
                                <span class="text-dark text-sm">满199元免运费</span>
                            </div>
                        </div>
                        
                        <!-- 规格选择 -->
                        <div class="mb-6">
                            <div class="flex items-center mb-3">
                                <span class="text-dark-2 text-sm w-16">颜色:</span>
                                <div class="flex flex-wrap gap-2">
                                    <button class="border-2 border-primary bg-white px-4 py-1 rounded-full text-sm flex items-center">
                                        <span class="w-3 h-3 rounded-full bg-black mr-2"></span>
                                        幻影黑
                                    </button>
                                    <button class="border-2 border-transparent hover:border-primary bg-white px-4 py-1 rounded-full text-sm flex items-center">
                                        <span class="w-3 h-3 rounded-full bg-white mr-2"></span>
                                        珍珠白
                                    </button>
                                    <button class="border-2 border-transparent hover:border-primary bg-white px-4 py-1 rounded-full text-sm flex items-center">
                                        <span class="w-3 h-3 rounded-full bg-blue mr-2"></span>
                                        天空蓝
                                    </button>
                                </div>
                            </div>
                            <div class="flex items-center mb-3">
                                <span class="text-dark-2 text-sm w-16">内存:</span>
                                <div class="flex flex-wrap gap-2">
                                    <button class="border-2 border-primary bg-white px-4 py-1 rounded-full text-sm">8GB+128GB</button>
                                    <button class="border-2 border-transparent hover:border-primary bg-white px-4 py-1 rounded-full text-sm">8GB+256GB</button>
                                    <button class="border-2 border-transparent hover:border-primary bg-white px-4 py-1 rounded-full text-sm">12GB+256GB</button>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 数量选择 -->
                        <div class="flex items-center mb-8">
                            <span class="text-dark-2 text-sm w-16">数量:</span>
                            <div class="flex border rounded">
                                <button class="w-8 h-8 flex items-center justify-center border-r hover:bg-light-1 transition-colors">
                                    <i class="fa fa-minus text-sm"></i>
                                </button>
                                <input type="number" value="1" min="1" class="w-16 h-8 text-center border-none focus:outline-none">
                                <button class="w-8 h-8 flex items-center justify-center border-l hover:bg-light-1 transition-colors">
                                    <i class="fa fa-plus text-sm"></i>
                                </button>
                            </div>
                            <span class="text-dark-2 text-sm ml-2">库存: 123件</span>
                        </div>
                        
                        <!-- 操作按钮 -->
                        <div class="flex flex-wrap gap-4">
                            <button class="add-to-cart-btn bg-primary text-white px-8 py-3 rounded-lg hover:bg-primary/90 transition-colors font-medium flex items-center">
                                <i class="fa fa-shopping-cart mr-2"></i>加入购物车
                            </button>
                            <button class="bg-danger text-white px-8 py-3 rounded-lg hover:bg-danger/90 transition-colors font-medium flex items-center">
                                <i class="fa fa-bolt mr-2"></i>立即购买
                            </button>
                            <button class="border border-light-2 text-dark-2 px-4 py-3 rounded-lg hover:border-primary hover:text-primary transition-colors">
                                <i class="fa fa-heart-o"></i>
                            </button>
                        </div>
                        
                        <!-- 服务保障 -->
                        <div class="flex flex-wrap gap-x-6 gap-y-2 mt-6 text-sm text-dark-2">
                            <div class="flex items-center">
                                <i class="fa fa-check-circle text-success mr-1"></i>
                                <span>正品保障</span>
                            </div>
                            <div class="flex items-center">
                                <i class="fa fa-check-circle text-success mr-1"></i>
                                <span>7天无理由退换</span>
                            </div>
                            <div class="flex items-center">
                                <i class="fa fa-check-circle text-success mr-1"></i>
                                <span>全国联保</span>
                            </div>
                            <div class="flex items-center">
                                <i class="fa fa-check-circle text-success mr-1"></i>
                                <span>满199元免运费</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 商品详情和评论 -->
            <div class="grid grid-cols-1 lg:grid-cols-4 gap-6 mt-8">
                <!-- 左侧边栏 -->
                <div class="lg:col-span-1 hidden lg:block">
                    <div class="bg-white rounded-lg shadow-sm p-4 sticky top-24">
                        <h3 class="font-bold mb-4">推荐商品</h3>
                        <div class="space-y-4">
                            <a href="#" class="flex group">
                                <img src="images/related1.jpg" alt="相关推荐1" class="w-20 h-20 object-cover rounded">
                                <div class="ml-3">
                                    <h4 class="text-sm font-medium line-clamp-2 group-hover:text-primary transition-colors">无线蓝牙耳机 高清通话 主动降噪</h4>
                                    <p class="text-danger font-bold text-sm mt-1">¥299</p>
                                </div>
                            </a>
                            <a href="#" class="flex group">
                                <img src="images/related2.jpg" alt="相关推荐2" class="w-20 h-20 object-cover rounded">
                                <div class="ml-3">
                                    <h4 class="text-sm font-medium line-clamp-2 group-hover:text-primary transition-colors">手机保护壳 防摔耐磨 透明全包</h4>
                                    <p class="text-danger font-bold text-sm mt-1">¥39</p>
                                </div>
                            </a>
                            <a href="#" class="flex group">
                                <img src="images/related3.jpg" alt="相关推荐3" class="w-20 h-20 object-cover rounded">
                                <div class="ml-3">
                                    <h4 class="text-sm font-medium line-clamp-2 group-hover:text-primary transition-colors">65W快充充电器 多口输出 兼容多协议</h4>
                                    <p class="text-danger font-bold text-sm mt-1">¥89</p>
                                </div>
                            </a>
                            <a href="#" class="flex group">
                                <img src="images/related4.jpg" alt="相关推荐4" class="w-20 h-20 object-cover rounded">
                                <div class="ml-3">
                                    <h4 class="text-sm font-medium line-clamp-2 group-hover:text-primary transition-colors">钢化膜 高清防指纹 9H硬度</h4>
                                    <p class="text-danger font-bold text-sm mt-1">¥49</p>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
                
                <!-- 右侧内容 -->
                <div class="lg:col-span-3">
                    <!-- 详情和评论选项卡 -->
                    <div class="bg-white rounded-lg shadow-sm mb-6">
                        <div class="flex border-b">
                            <button class="tab-btn active px-6 py-4 font-medium text-primary border-b-2 border-primary">商品详情</button>
                            <button class="tab-btn px-6 py-4 font-medium text-dark-2 hover:text-primary">用户评价 (1286)</button>
                            <button class="tab-btn px-6 py-4 font-medium text-dark-2 hover:text-primary">规格参数</button>
                            <button class="tab-btn px-6 py-4 font-medium text-dark-2 hover:text-primary">售后保障</button>
                        </div>
                        
                                <!-- 商品详情内容 -->
        <div class="tab-content active p-6">
            <h3 class="text-lg font-bold mb-4">产品介绍</h3>
            <div class="space-y-4">
                <p>2025款旗舰智能手机采用最新一代处理器，性能提升40%，功耗降低25%，带来更流畅的使用体验和更长的续航时间。</p>
                <p>6.7英寸超视网膜XDR显示屏，支持120Hz自适应刷新率，色彩表现更加精准，画面更加流畅自然。</p>
                <p>后置三摄像头系统，包括5000万像素主摄、1200万像素超广角和1200万像素长焦镜头，支持8K视频拍摄和多种专业摄影模式。</p>
                <p>内置大容量电池，支持65W快充和无线充电，30分钟可充电至70%。</p>
                <p>采用坚固耐用的钛金属边框和陶瓷背板，IP68级防水防尘，更加耐用可靠。</p>
            </div>
            
            <div class="mt-8">
                <h3 class="text-lg font-bold mb-4">产品展示</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <img src="images/product_detail_large1.jpg" alt="产品展示1" class="w-full h-auto rounded">
                    <img src="images/product_detail_large2.jpg" alt="产品展示2" class="w-full h-auto rounded">
                    <img src="images/product_detail_large3.jpg" alt="产品展示3" class="w-full h-auto rounded">
                    <img src="images/product_detail_large4.jpg" alt="产品展示4" class="w-full h-auto rounded">
                </div>
            </div>
            
            <div class="mt-8">
                <h3 class="text-lg font-bold mb-4">包装清单</h3>
                <ul class="list-disc pl-5 space-y-2">
                    <li>智能手机 x1</li>
                    <li>快速充电器 x1</li>
                    <li>USB-C数据线 x1</li>
                    <li>取卡针 x1</li>
                    <li>保护壳 x1</li>
                    <li>屏幕保护膜(已预装) x1</li>
                    <li>说明书 x1</li>
                    <li>保修卡 x1</li>
                </ul>
            </div>
        </div>
        
        <!-- 用户评价内容 -->
        <div class="tab-content hidden p-6">
            <div class="flex flex-col md:flex-row gap-8">
                <div class="md:w-1/3 bg-light-1 p-4 rounded-lg text-center">
                    <h4 class="font-bold mb-2">总体评分</h4>
                    <div class="flex justify-center mb-2">
                        <i class="fa fa-star text-warning"></i>
                        <i class="fa fa-star text-warning"></i>
                        <i class="fa fa-star text-warning"></i>
                        <i class="fa fa-star text-warning"></i>
                        <i class="fa fa-star text-warning"></i>
                    </div>
                    <p class="text-3xl font-bold">5.0</p>
                    <p class="text-dark-2 text-sm mt-1">基于1286条评价</p>
                    
                    <div class="mt-6 space-y-2">
                        <div class="flex items-center">
                            <div class="w-16 text-sm text-dark-2">5星</div>
                            <div class="flex-1 h-2 bg-light-2 rounded-full mx-2">
                                <div class="h-2 bg-warning rounded-full" style="width: 90%"></div>
                            </div>
                            <div class="w-8 text-sm text-dark-2">90%</div>
                        </div>
                        <div class="flex items-center">
                            <div class="w-16 text-sm text-dark-2">4星</div>
                            <div class="flex-1 h-2 bg-light-2 rounded-full mx-2">
                                <div class="h-2 bg-warning rounded-full" style="width: 8%"></div>
                            </div>
                            <div class="w-8 text-sm text-dark-2">8%</div>
                        </div>
                        <div class="flex items-center">
                            <div class="w-16 text-sm text-dark-2">3星</div>
                            <div class="flex-1 h-2 bg-light-2 rounded-full mx-2">
                                <div class="h-2 bg-warning rounded-full" style="width: 2%"></div>
                            </div>
                            <div class="w-8 text-sm text-dark-2">2%</div>
                        </div>
                        <div class="flex items-center">
                            <div class="w-16 text-sm text-dark-2">2星</div>
                            <div class="flex-1 h-2 bg-light-2 rounded-full mx-2">
                                <div class="h-2 bg-warning rounded-full" style="width: 0%"></div>
                            </div>
                            <div class="w-8 text-sm text-dark-2">0%</div>
                        </div>
                        <div class="flex items-center">
                            <div class="w-16 text-sm text-dark-2">1星</div>
                            <div class="flex-1 h-2 bg-light-2 rounded-full mx-2">
                                <div class="h-2 bg-warning rounded-full" style="width: 0%"></div>
                            </div>
                            <div class="w-8 text-sm text-dark-2">0%</div>
                        </div>
                    </div>
                </div>
                
                <div class="md:w-2/3">
                    <div class="flex flex-wrap gap-2 mb-6">
                        <button class="px-4 py-1 bg-primary/10 text-primary rounded-full text-sm hover:bg-primary/20 transition-colors">全部评价</button>
                        <button class="px-4 py-1 bg-light-1 text-dark-2 rounded-full text-sm hover:bg-light-2 transition-colors">有图(215)</button>
                        <button class="px-4 py-1 bg-light-1 text-dark-2 rounded-full text-sm hover:bg-light-2 transition-colors">好评(1157)</button>
                        <button class="px-4 py-1 bg-light-1 text-dark-2 rounded-full text-sm hover:bg-light-2 transition-colors">中评(105)</button>
                        <button class="px-4 py-1 bg-light-1 text-dark-2 rounded-full text-sm hover:bg-light-2 transition-colors">差评(24)</button>
                    </div>
                    
                    <div class="space-y-6">
                        <div class="border-b border-light-2 pb-6">
                            <div class="flex items-center mb-2">
                                <img src="images/user_avatar1.jpg" alt="用户头像" class="w-10 h-10 rounded-full object-cover">
                                <div class="ml-3">
                                    <h5 class="font-medium">李明</h5>
                                    <div class="flex text-xs text-dark-2">
                                        <span>2025-05-15</span>
                                        <span class="mx-2">|</span>
                                        <span>8GB+256GB / 幻影黑</span>
                                    </div>
                                </div>
                                <div class="ml-auto flex">
                                    <i class="fa fa-star text-warning"></i>
                                    <i class="fa fa-star text-warning"></i>
                                    <i class="fa fa-star text-warning"></i>
                                    <i class="fa fa-star text-warning"></i>
                                    <i class="fa fa-star text-warning"></i>
                                </div>
                            </div>
                            <p class="mb-3">手机非常棒，性能强劲，屏幕显示效果惊艳，拍照也很出色。电池续航比我之前的手机强很多，一天重度使用完全没问题。充电速度也很快，非常满意！</p>
                            <div class="grid grid-cols-4 gap-2 mb-3">
                                <img src="images/review1.jpg" alt="用户评价图1" class="w-full h-20 object-cover rounded">
                                <img src="images/review2.jpg" alt="用户评价图2" class="w-full h-20 object-cover rounded">
                                <img src="images/review3.jpg" alt="用户评价图3" class="w-full h-20 object-cover rounded">
                            </div>
                            <div class="flex items-center text-sm text-dark-2">
                                <button class="flex items-center hover:text-primary transition-colors">
                                    <i class="fa fa-thumbs-o-up mr-1"></i>
                                    <span>有用(128)</span>
                                </button>
                                <button class="ml-4 flex items-center hover:text-primary transition-colors">
                                    <i class="fa fa-comment-o mr-1"></i>
                                    <span>回复</span>
                                </button>
                            </div>
                        </div>
                        
                        <div class="border-b border-light-2 pb-6">
                            <div class="flex items-center mb-2">
                                <img src="images/user_avatar2.jpg" alt="用户头像" class="w-10 h-10 rounded-full object-cover">
                                <div class="ml-3">
                                    <h5 class="font-medium">张华</h5>
                                    <div class="flex text-xs text-dark-2">
                                        <span>2025-05-10</span>
                                        <span class="mx-2">|</span>
                                        <span>8GB+128GB / 天空蓝</span>
                                    </div>
                                </div>
                                <div class="ml-auto flex">
                                    <i class="fa fa-star text-warning"></i>
                                    <i class="fa fa-star text-warning"></i>
                                    <i class="fa fa-star text-warning"></i>
                                    <i class="fa fa-star text-warning"></i>
                                    <i class="fa fa-star-o text-warning"></i>
                                </div>
                            </div>
                            <p class="mb-3">这是我用过的最好的手机之一，屏幕显示效果非常出色，色彩还原准确，刷新率也很流畅。相机拍照效果也很好，特别是夜景模式。唯一的缺点可能是有点重，但考虑到它的性能和电池容量，这也是可以接受的。</p>
                            <div class="flex items-center text-sm text-dark-2">
                                <button class="flex items-center hover:text-primary transition-colors">
                                    <i class="fa fa-thumbs-o-up mr-1"></i>
                                    <span>有用(95)</span>
                                </button>
                                <button class="ml-4 flex items-center hover:text-primary transition-colors">
                                    <i class="fa fa-comment-o mr-1"></i>
                                    <span>回复</span>
                                </button>
                            </div>
                        </div>
                        
                        <div class="border-b border-light-2 pb-6">
                            <div class="flex items-center mb-2">
                                <img src="images/user_avatar3.jpg" alt="用户头像" class="w-10 h-10 rounded-full object-cover">
                                <div class="ml-3">
                                    <h5 class="font-medium">王芳</h5>
                                    <div class="flex text-xs text-dark-2">
                                        <span>2025-05-05</span>
                                        <span class="mx-2">|</span>
                                        <span>12GB+256GB / 珍珠白</span>
                                    </div>
                                </div>
                                <div class="ml-auto flex">
                                    <i class="fa fa-star text-warning"></i>
                                    <i class="fa fa-star text-warning"></i>
                                    <i class="fa fa-star text-warning"></i>
                                    <i class="fa fa-star text-warning"></i>
                                    <i class="fa fa-star text-warning"></i>
                                </div>
                            </div>
                            <p class="mb-3">手机真的很棒，运行速度非常快，没有任何卡顿。拍照功能也很强大，特别是自拍效果很好。电池续航也很满意，一天使用下来还有30%的电量。充电速度也很快，非常推荐！</p>
                            <div class="grid grid-cols-4 gap-2 mb-3">
                                <img src="images/review4.jpg" alt="用户评价图4" class="w-full h-20 object-cover rounded">
                                <img src="images/review5.jpg" alt="用户评价图5" class="w-full h-20 object-cover rounded">
                            </div>
                            <div class="flex items-center text-sm text-dark-2">
                                <button class="flex items-center hover:text-primary transition-colors">
                                    <i class="fa fa-thumbs-o-up mr-1"></i>
                                    <span>有用(76)</span>
                                </button>
                                <button class="ml-4 flex items-center hover:text-primary transition-colors">
                                    <i class="fa fa-comment-o mr-1"></i>
                                    <span>回复</span>
                                </button>
                            </div>
                        </div>
                        
                        <div class="flex justify-center mt-8">
                            <button class="px-6 py-2 border border-light-2 rounded-lg hover:bg-light-1 transition-colors">
                                加载更多评论
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 规格参数内容 -->
        <div class="tab-content hidden p-6">
            <div class="overflow-x-auto">
                <table class="w-full border-collapse">
                    <thead>
                        <tr class="bg-light-1">
                            <th class="py-3 px-4 text-left font-medium">规格参数</th>
                            <th class="py-3 px-4 text-left font-medium">详情</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="border-b border-light-2">
                            <td class="py-3 px-4 font-medium">基本信息</td>
                            <td class="py-3 px-4"></td>
                        </tr>
                        <tr class="border-b border-light-2">
                            <td class="py-3 px-4 text-dark-2">品牌</td>
                            <td class="py-3 px-4">TechGiant</td>
                        </tr>
                        <tr class="border-b border-light-2">
                            <td class="py-3 px-4 text-dark-2">型号</td>
                            <td class="py-3 px-4">TechGiant Pro Max 2025</td>
                        </tr>
                        <tr class="border-b border-light-2">
                            <td class="py-3 px-4 text-dark-2">发布时间</td>
                            <td class="py-3 px-4">2025年3月</td>
                        </tr>
                        <tr class="border-b border-light-2">
                            <td class="py-3 px-4 text-dark-2">操作系统</td>
                            <td class="py-3 px-4">TechOS 15</td>
                        </tr>
                        <tr class="border-b border-light-2">
                            <td class="py-3 px-4 font-medium">屏幕</td>
                            <td class="py-3 px-4"></td>
                        </tr>
                        <tr class="border-b border-light-2">
                            <td class="py-3 px-4 text-dark-2">屏幕尺寸</td>
                            <td class="py-3 px-4">6.7英寸</td>
                        </tr>
                        <tr class="border-b border-light-2">
                            <td class="py-3 px-4 text-dark-2">分辨率</td>
                            <td class="py-3 px-4">3200×1440</td>
                        </tr>
                        <tr class="border-b border-light-2">
                            <td class="py-3 px-4 text-dark-2">刷新率</td>
                            <td class="py-3 px-4">120Hz自适应刷新率</td>
                        </tr>
                        <tr class="border-b border-light-2">
                            <td class="py-3 px-4 text-dark-2">屏幕类型</td>
                            <td class="py-3 px-4">超视网膜XDR显示屏</td>
                        </tr>
                        <tr class="border-b border-light-2">
                            <td class="py-3 px-4 font-medium">性能</td>
                            <td class="py-3 px-4"></td>
                        </tr>
                        <tr class="border-b border-light-2">
                            <td class="py-3 px-4 text-dark-2">处理器</td>
                            <td class="py-3 px-4">TechGiant A18 Pro</td>
                        </tr>
                        <tr class="border-b border-light-2">
                            <td class="py-3 px-4 text-dark-2">运行内存</td>
                            <td class="py-3 px-4">8GB/12GB</td>
                        </tr>
                        <tr class="border-b border-light-2">
                            <td class="py-3 px-4 text-dark-2">机身存储</td>
                            <td class="py-3 px-4">128GB/256GB</td>
                        </tr>
                        <tr class="border-b border-light-2">
                            <td class="py-3 px-4 text-dark-2">存储扩展</td>
                            <td class="py-3 px-4">不支持</td>
                        </tr>
                        <tr class="border-b border-light-2">
                            <td class="py-3 px-4 font-medium">摄像头</td>
                            <td class="py-3 px-4"></td>
                        </tr>
                        <tr class="border-b border-light-2">
                            <td class="py-3 px-4 text-dark-2">后置摄像头</td>
                            <td class="py-3 px-4">5000万像素主摄+1200万像素超广角+1200万像素长焦</td>
                        </tr>
                        <tr class="border-b border-light-2">
                            <td class="py-3 px-4 text-dark-2">前置摄像头</td>
                            <td class="py-3 px-4">3200万像素</td>
                        </tr>
                        <tr class="border-b border-light-2">
                            <td class="py-3 px-4 text-dark-2">视频拍摄</td>
                            <td class="py-3 px-4">8K@30fps，4K@60fps</td>
                        </tr>
                        <tr class="border-b border-light-2">
                            <td class="py-3 px-4 font-medium">电池与充电</td>
                            <td class="py-3 px-4"></td>
                        </tr>
                        <tr class="border-b border-light-2">
                            <td class="py-3 px-4 text-dark-2">电池容量</td>
                            <td class="py-3 px-4">5000mAh</td>
                        </tr>
                        <tr class="border-b border-light-2">
                            <td class="py-3 px-4 text-dark-2">有线充电</td>
                            <td class="py-3 px-4">65W快充</td>
                        </tr>
                        <tr class="border-b border-light-2">
                            <td class="py-3 px-4 text-dark-2">无线充电</td>
                            <td class="py-3 px-4">支持，最高15W</td>
                        </tr>
                        <tr class="border-b border-light-2">
                            <td class="py-3 px-4 font-medium">外观</td>
                            <td class="py-3 px-4"></td>
                        </tr>
                        <tr class="border-b border-light-2">
                            <td class="py-3 px-4 text-dark-2">机身尺寸</td>
                            <td class="py-3 px-4">160.7×77.6×7.8mm</td>
                        </tr>
                        <tr class="border-b border-light-2">
                            <td class="py-3 px-4 text-dark-2">机身重量</td>
                            <td class="py-3 px-4">226g</td>
                        </tr>
                        <tr class="border-b border-light-2">
                            <td class="py-3 px-4 text-dark-2">颜色</td>
                            <td class="py-3 px-4">幻影黑、珍珠白、天空蓝</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        
        <!-- 售后保障内容 -->
        <div class="tab-content hidden p-6">
            <div class="space-y-6">
                <div>
                    <h3 class="text-lg font-bold mb-4">售后服务</h3>
                    <ul class="list-disc pl-5 space-y-2">
                        <li>全国联保，享受三包服务，质保期为1年</li>
                        <li>7天无理由退货，15天质量问题换货</li>
                        <li>售后服务热线：400-888-8888</li>
                        <li>服务时间：周一至周日 9:00-21:00</li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="text-lg font-bold mb-4">保修政策</h3>
                    <p>本产品全国联保，享受三包服务，质保期为1年（自购买之日起计算）。如因质量问题或故障，凭厂商维修中心或特约维修点的质量检测证明，享受7日内退货，15日内换货，15日以上在质保期内享受免费保修等三包服务！</p>
                </div>
                
                <div>
                    <h3 class="text-lg font-bold mb-4">退换货流程</h3>
                    <ol class="list-decimal pl-5 space-y-2">
                        <li>联系客服申请退换货，提供订单号和问题描述</li>
                        <li>客服审核通过后，提供退换货地址</li>
                        <li>将商品寄回指定地址，并保留物流单号</li>
                        <li>收到退回商品后，进行检测和处理</li>
                        <li>如符合退换货条件，将进行退款或重新发货</li>
                    </ol>
                </div>
                
                <div>
                    <h3 class="text-lg font-bold mb-4">常见问题</h3>
                    <div class="space-y-4">
                        <div>
                            <h4 class="font-medium mb-1">如何申请售后服务？</h4>
                            <p>您可以通过客服热线、在线客服或售后服务邮箱联系我们，提供订单号和问题描述，我们将为您提供相应的售后服务。</p>
                        </div>
                        <div>
                            <h4 class="font-medium mb-1">退换货需要满足哪些条件？</h4>
                            <p>商品需在收货后7天内申请无理由退货，需保证商品完好无损，不影响二次销售。质量问题换货需在15天内提出，并提供质量问题的证明。</p>
                        </div>
                        <div>
                            <h4 class="font-medium mb-1">退换货运费谁承担？</h4>
                            <p>如因质量问题导致的退换货，运费由我们承担；如因个人原因申请无理由退货，运费由您承担。</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</main>

<!-- 推荐商品 -->
<div class="bg-white py-8">
    <div class="container mx-auto px-4">
        <h2 class="text-xl font-bold mb-6">猜你喜欢</h2>
        <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
            <div class="bg-white rounded-lg shadow-sm overflow-hidden group hover:shadow-md transition-shadow">
                <div class="relative">
                    <img src="images/recommend1.jpg" alt="推荐商品1" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300">
                    <div class="absolute top-2 right-2 bg-danger text-white text-xs py-0.5 px-2 rounded">限时优惠</div>
                </div>
                <div class="p-3">
                    <h3 class="text-sm font-medium line-clamp-2 group-hover:text-primary transition-colors">无线蓝牙耳机 高清通话 主动降噪</h3>
                    <div class="flex items-center mt-1 text-xs text-warning">
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star-half-o"></i>
                        <span class="text-dark-2 ml-1">4.5 (248)</span>
                    </div>
                    <div class="mt-2">
                        <span class="text-danger font-bold">¥299</span>
                        <span class="text-light-3 text-sm line-through ml-1">¥399</span>
                    </div>
                </div>
            </div>
            
            <div class="bg-white rounded-lg shadow-sm overflow-hidden group hover:shadow-md transition-shadow">
                <div class="relative">
                    <img src="images/recommend2.jpg" alt="推荐商品2" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300">
                    <div class="absolute top-2 right-2 bg-primary text-white text-xs py-0.5 px-2 rounded">新品上市</div>
                </div>
                <div class="p-3">
                    <h3 class="text-sm font-medium line-clamp-2 group-hover:text-primary transition-colors">智能手表 健康监测 运动追踪 血氧检测</h3>
                    <div class="flex items-center mt-1 text-xs text-warning">
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star-o"></i>
                        <span class="text-dark-2 ml-1">4.0 (156)</span>
                    </div>
                    <div class="mt-2">
                        <span class="text-danger font-bold">¥899</span>
                        <span class="text-light-3 text-sm line-through ml-1">¥999</span>
                    </div>
                </div>
            </div>
            
            <div class="bg-white rounded-lg shadow-sm overflow-hidden group hover:shadow-md transition-shadow">
                <div class="relative">
                    <img src="images/recommend3.jpg" alt="推荐商品3" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300">
                </div>
                <div class="p-3">
                    <h3 class="text-sm font-medium line-clamp-2 group-hover:text-primary transition-colors">平板电脑 10.9英寸 256G 轻薄便携</h3>
                    <div class="flex items-center mt-1 text-xs text-warning">
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <span class="text-dark-2 ml-1">5.0 (324)</span>
                    </div>
                    <div class="mt-2">
                        <span class="text-danger font-bold">¥3699</span>
                        <span class="text-light-3 text-sm line-through ml-1">¥3999</span>
                    </div>
                </div>
            </div>
            
            <div class="bg-white rounded-lg shadow-sm overflow-hidden group hover:shadow-md transition-shadow">
                <div class="relative">
                    <img src="images/recommend4.jpg" alt="推荐商品4" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300">
                    <div class="absolute top-2 right-2 bg-warning text-white text-xs py-0.5 px-2 rounded">热卖</div>
                </div>
                <div class="p-3">
                    <h3 class="text-sm font-medium line-clamp-2 group-hover:text-primary transition-colors">移动电源 20000mAh 双向快充 数显电量</h3>
                    <div class="flex items-center mt-1 text-xs text-warning">
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star-half-o"></i>
                        <span class="text-dark-2 ml-1">4.7 (412)</span>
                    </div>
                    <div class="mt-2">
                        <span class="text-danger font-bold">¥159</span>
                        <span class="text-light-3 text-sm line-through ml-1">¥199</span>
                    </div>
                </div>
            </div>
            
            <div class="hidden lg:block bg-white rounded-lg shadow-sm overflow-hidden group hover:shadow-md transition-shadow">
                <div class="relative">
                    <img src="images/recommend5.jpg" alt="推荐商品5" class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300">
                </div>
                <div class="p-3">
                    <h3 class="text-sm font-medium line-clamp-2 group-hover:text-primary transition-colors">智能音箱 语音助手 家居控制 音质出色</h3>
                    <div class="flex items-center mt-1 text-xs text-warning">
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star-o"></i>
                        <span class="text-dark-2 ml-1">4.2 (189)</span>
                    </div>
                    <div class="mt-2">
                        <span class="text-danger font-bold">¥249</span>
                        <span class="text-light-3 text-sm line-through ml-1">¥299</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 页脚 -->
<footer class="bg-dark text-white pt-12 pb-6">
    <div class="container mx-auto px-4">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-8">
            <div>
                <h3 class="text-lg font-bold mb-4">关于我们</h3>
                <ul class="space-y-2">
                    <li><a href="#" class="text-light-3 hover:text-white transition-colors">公司简介</a></li>
                    <li><a href="#" class="text-light-3 hover:text-white transition-colors">招贤纳士</a></li>
                    <li><a href="#" class="text-light-3 hover:text-white transition-colors">联系我们</a></li>
                    <li><a href="#" class="text-light-3 hover:text-white transition-colors">隐私政策</a></li>
                    <li><a href="#" class="text-light-3 hover:text-white transition-colors">用户协议</a></li>
                </ul>
            </div>
            
            <div>
                <h3 class="text-lg font-bold mb-4">客户服务</h3>
                <ul class="space-y-2">
                    <li><a href="#" class="text-light-3 hover:text-white transition-colors">帮助中心</a></li>
                    <li><a href="#" class="text-light-3 hover:text-white transition-colors">订单查询</a></li>
                    <li><a href="#" class="text-light-3 hover:text-white transition-colors">配送说明</a></li>
                    <li><a href="#" class="text-light-3 hover:text-white transition-colors">退换货政策</a></li>
                    <li><a href="#" class="text-light-3 hover:text-white transition-colors">常见问题</a></li>
                </ul>
            </div>
            
            <div>
                <h3 class="text-lg font-bold mb-4">支付方式</h3>
                <ul class="space-y-2">
                    <li><a href="#" class="text-light-3 hover:text-white transition-colors">在线支付</a></li>
                    <li><a href="#" class="text-light-3 hover:text-white transition-colors">银行转账</a></li>
                    <li><a href="#" class="text-light-3 hover:text-white transition-colors">货到付款</a></li>
                    <li><a href="#" class="text-light-3 hover:text-white transition-colors">优惠券使用</a></li>
                    <li><a href="#" class="text-light-3 hover:text-white transition-colors">分期付款</a></li>
                </ul>
            </div>
            
            <div>
                <h3 class="text-lg font-bold mb-4">关注我们</h3>
                <div class="flex space-x-4 mb-4">
                    <a href="#" class="w-10 h-10 rounded-full bg-dark-2 flex items-center justify-center hover:bg-primary transition-colors">
                        <i class="fa fa-weibo"></i>
                    </a>
                    <a href="#" class="w-10 h-10 rounded-full bg-dark-2 flex items-center justify-center hover:bg-primary transition-colors">
                        <i class="fa fa-wechat"></i>
                    </a>
                    <a href="#" class="w-10 h-10 rounded-full bg-dark-2 flex items-center justify-center hover:bg-primary transition-colors">
                        <i class="fa fa-instagram"></i>
                    </a>
                    <a href="#" class="w-10 h-10 rounded-full bg-dark-2 flex items-center justify-center hover:bg-primary transition-colors">
                        <i class="fa fa-twitter"></i>
                    </a>
                </div>
                <div>
                    <h4 class="font-medium mb-2">客服热线</h4>
                    <p class="text-2xl font-bold mb-1">400-888-8888</p>
                    <p class="text-light-3 text-sm">周一至周日 9:00-21:00</p>
                </div>
            </div>
        </div>
        
        <div class="border-t border-dark-2 pt-6 mt-6 text-center text-light-3 text-sm">
            <p>© 2025 ShoppingEase. 保留所有权利。</p>
        </div>
    </div>
</footer>

<script>
    // 标签页切换功能
    document.addEventListener('DOMContentLoaded', function() {
        const tabBtns = document.querySelectorAll('.tab-btn');
        const tabContents = document.querySelectorAll('.tab-content');
        
        tabBtns.forEach((btn, index) => {
            btn.addEventListener('click', () => {
                // 移除所有按钮的活跃状态
                tabBtns.forEach(b => {
                    b.classList.remove('active', 'text-primary', 'border-b-2', 'border-primary');
                    b.classList.add('text-dark-2');
                });
                
                // 隐藏所有内容
                tabContents.forEach(content => {
                    content.classList.remove('active');
                    content.classList.add('hidden');
                });
                
                // 添加当前按钮的活跃状态
                btn.classList.add('active', 'text-primary', 'border-b-2', 'border-primary');
                btn.classList.remove('text-dark-2');
                
                // 显示当前内容
                tabContents[index].classList.add('active');
                tabContents[index].classList.remove('hidden');
            });
        });
        
        // 数量选择器功能
        const minusBtn = document.querySelector('.border-r');
        const plusBtn = document.querySelector('.border-l');
        const quantityInput = document.querySelector('input[type="number"]');
        
        minusBtn.addEventListener('click', () => {
            const currentValue = parseInt(quantityInput.value);
            if (currentValue > 1) {
                quantityInput.value = currentValue - 1;
            }
        });
        
        plusBtn.addEventListener('click', () => {
            const currentValue = parseInt(quantityInput.value);
            if (currentValue < 100) {
                quantityInput.value = currentValue + 1;
            }
        });
        
        // 添加到购物车功能
        const addToCartBtn = document.querySelector('.add-to-cart-btn');
        const cartCount = document.getElementById('cart-count');
        
        addToCartBtn.addEventListener('click', () => {
            // 更新购物车数量
            let count = parseInt(cartCount.textContent);
            cartCount.textContent = count + parseInt(quantityInput.value);
            
            // 显示添加成功提示
            alert('商品已成功添加到购物车！');
        });
    });
</script>
</body>
</html>